import React, { useState } from 'react';
import { useNavigate, Outlet } from 'react-router-dom';
import { Menu, Layout } from 'antd';
import type { MenuProps } from 'antd';

import './PlatForm.css'
import { sidebarItems, defaultPageKey } from '../../config';
import { MemuDrawerButton, Breadcrumbs } from '../../components';

const { Header, Content, Footer, Sider } = Layout;

export const PlatForm = () => {
    const [collapsed, setCollapsed] = useState(false);
    const [currentComponentKey, setCurrentComponentKey] = useState(defaultPageKey);
    const navigate = useNavigate();
    const ItemClickCallback: MenuProps['onClick'] = ({ key }) => {
        setCurrentComponentKey(key);
        navigate(key);
    };
    return (
        <Layout className="layout">
            <Sider collapsible collapsed={collapsed} trigger={null}>
                <div className="logo">
                    <div>React Final Form</div>
                    <div>Leaning Platform</div>
                </div>
                <Menu
                    theme="dark"
                    defaultSelectedKeys={['demo']}
                    mode="inline"
                    items={sidebarItems}
                    onClick={ItemClickCallback}
                />
            </Sider>
            <Layout className="site-layout">
                <Header className="site-layout-header">
                    <MemuDrawerButton
                        collapsed={collapsed}
                        onClick={() => setCollapsed(!collapsed)}
                    />
                </Header>
                <Content className="layout-content">
                    <Breadcrumbs currentComponentKey={currentComponentKey}/>
                    <div className="layout-content-board-background">
                        {/* SubRoute slot here*/}
                        <Outlet></Outlet>
                    </div>
                </Content>
                <Footer className="footer">
                    React Final Form Leaning Platform ©2022 Created by Jianshu Shi
                </Footer>
            </Layout>
        </Layout>
    );
};
